<template>
    <div class="leftTwo">
        <!-- <ThemeTitle :title="title"/> -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">责任落实情况</div>
            </div>
            <div class="city">
                <!-- <el-select class="inputRightZeren" v-model="state1" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select> -->
            </div>
        </div>
        <div class="county">
            <el-carousel :interval="4000" height="280px" width="150px">
                <el-carousel-item
                    v-for="(item, index) in xukeList"
                    :key="index"
                >
                    <div class="titles">
                        <div>
                            <div class="title">
                                {{ item.title }}
                            </div>
                            <div
                                class="content"
                                v-for="(item1, index1) in item.content"
                                :key="index1"
                            >
                                <div class="titleC">{{ item1.childTitle }}</div>
                                <div>{{ item1.line1 }}</div>
                                <div>{{ item1.line2 }}</div>
                                <div>{{ item1.line3 }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="title">
                                {{ item.title1 }}
                            </div>
                            <div
                                class="content"
                                v-for="(item2, index2) in item.content1"
                                :key="index2"
                            >
                                <div class="titleC">{{ item2.childTitle }}</div>
                                <div>{{ item2.line1 }}</div>
                                <div>{{ item2.line2 }}</div>
                                <div>{{ item2.line3 }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="content">
                        <div v-for="( item1 , index1) in item.content" :key="index1">
                            <div>{{item1.childTitle}}</div>
                            <div>{{item1.line1}}</div>
                            <div>{{item1.line2}}</div>
                            <div>{{item1.line3}}</div>
                            <div>{{item1.line4}}</div>
                        </div>
                    </div> -->
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import { onMounted, ref, provide, reactive, watch } from "vue";
import axios from "axios";
import echarts from "echarts";
export default {
    components: {
        ThemeTitle,
    },
    props: {
        xkjyqk: Object,
    },
    setup(props) {
        const title = provide("title", "责任落实情况");

        const state1 = ref(" ");
        const options = [
            {
                value: "选项1",
                label: "园区0",
            },
            {
                value: "选项2",
                label: "园区1",
            },
            {
                value: "选项3",
                label: "园区21",
            },
            {
                value: "选项4",
                label: "园区2",
            },
            {
                value: "选项5",
                label: "园区3",
            },
            {
                value: "选项5",
                label: "园区4",
            },
            {
                value: "选项5",
                label: "园区5",
            },
            {
                value: "选项5",
                label: "园区6",
            },
            {
                value: "选项5",
                label: "园区7",
            },
        ];
        let xukeList = reactive([
            {
                title: "许可情况",
                content: [
                    {
                        childTitle: "营业执照到期",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "许可证书到期",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
                title1: "许可情况",
                content1: [
                    {
                        childTitle: "安全生产标准化到期",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "其他证书信息到期",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
            },
            {
                title: "人员管理",
                content: [
                    {
                        childTitle: "安全生产管理人员证书",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "安全生产责任人证书",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
                title1: "人员管理",
                content1: [
                    {
                        childTitle: "注册安全工程师证书",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "特种作业人员证书",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
            },
            {
                title: "教育培训",
                content: [
                    {
                        childTitle: "上岗培训企业统计",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "复工培训企业统计",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
                title1: "教育培训",
                content1: [
                    {
                        childTitle: "安全作业培训企业统计",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "安全资格培训企业统计",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
            },
            {
                title: "教育培训",
                content: [
                    {
                        childTitle: "其他企业统计",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
            },
            {
                title: "隐患排查",
                content: [
                    {
                        childTitle: "",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                    {
                        childTitle: "",
                        line1: "1300",
                        line2: "0",
                        line3: "12",
                    },
                ],
            },
        ]);
        watch(
            () => [props.xkjyqk],
            ([xkjyqk]) => {
                xukeList[0].content[0].line1 =
                    xkjyqk.xkqk.yyzzdq[0].lb + xkjyqk.xkqk.yyzzdq[0].sl;
                xukeList[0].content[0].line2 =
                    xkjyqk.xkqk.yyzzdq[1].lb + xkjyqk.xkqk.yyzzdq[1].sl;
                xukeList[0].content[0].line3 =
                    xkjyqk.xkqk.yyzzdq[2].lb + xkjyqk.xkqk.yyzzdq[2].sl;
                xukeList[0].content[1].line1 =
                    xkjyqk.xkqk.xkzsdq[0].lb + xkjyqk.xkqk.xkzsdq[0].sl;
                xukeList[0].content[1].line2 =
                    xkjyqk.xkqk.xkzsdq[1].lb + xkjyqk.xkqk.xkzsdq[1].sl;
                xukeList[0].content[1].line3 =
                    xkjyqk.xkqk.xkzsdq[2].lb + xkjyqk.xkqk.xkzsdq[2].sl;
                xukeList[0].content1[0].line1 =
                    xkjyqk.xkqk.aqscbzhdq[0].lb + xkjyqk.xkqk.aqscbzhdq[0].sl;
                xukeList[0].content1[0].line2 =
                    xkjyqk.xkqk.aqscbzhdq[1].lb + xkjyqk.xkqk.aqscbzhdq[1].sl;
                xukeList[0].content1[0].line3 =
                    xkjyqk.xkqk.aqscbzhdq[2].lb + xkjyqk.xkqk.aqscbzhdq[2].sl;
                xukeList[0].content1[1].line1 =
                    xkjyqk.xkqk.qtzsxxdq[0].lb + xkjyqk.xkqk.qtzsxxdq[0].sl;
                xukeList[0].content1[1].line2 =
                    xkjyqk.xkqk.qtzsxxdq[1].lb + xkjyqk.xkqk.qtzsxxdq[2].sl;
                xukeList[0].content1[1].line3 =
                    xkjyqk.xkqk.qtzsxxdq[2].lb + xkjyqk.xkqk.qtzsxxdq[2].sl;

                xukeList[1].content[0].line1 =
                    xkjyqk.rygl.aqscglryzs[0].lb + xkjyqk.rygl.aqscglryzs[0].sl;
                xukeList[1].content[0].line2 =
                    xkjyqk.rygl.aqscglryzs[1].lb + xkjyqk.rygl.aqscglryzs[1].sl;
                xukeList[1].content[0].line3 =
                    xkjyqk.rygl.aqscglryzs[2].lb + xkjyqk.rygl.aqscglryzs[2].sl;
                xukeList[1].content[1].line1 =
                    xkjyqk.rygl.aqsczrrzs[0].lb + xkjyqk.rygl.aqsczrrzs[0].sl;
                xukeList[1].content[1].line2 =
                    xkjyqk.rygl.aqsczrrzs[1].lb + xkjyqk.rygl.aqsczrrzs[1].sl;
                xukeList[1].content[1].line3 =
                    xkjyqk.rygl.aqsczrrzs[2].lb + xkjyqk.rygl.aqsczrrzs[2].sl;
                xukeList[1].content1[0].line1 =
                    xkjyqk.rygl.zcaqgcszs[0].lb + xkjyqk.rygl.zcaqgcszs[0].sl;
                xukeList[1].content1[0].line2 =
                    xkjyqk.rygl.zcaqgcszs[1].lb + xkjyqk.rygl.zcaqgcszs[1].sl;
                xukeList[1].content1[0].line3 =
                    xkjyqk.rygl.zcaqgcszs[2].lb + xkjyqk.rygl.zcaqgcszs[2].sl;
                xukeList[1].content1[1].line1 =
                    xkjyqk.rygl.tzzyryzs[0].lb + xkjyqk.rygl.tzzyryzs[0].sl;
                xukeList[1].content1[1].line2 =
                    xkjyqk.rygl.tzzyryzs[1].lb + xkjyqk.rygl.tzzyryzs[2].sl;
                xukeList[1].content1[1].line3 =
                    xkjyqk.rygl.tzzyryzs[2].lb + xkjyqk.rygl.tzzyryzs[2].sl;

                xukeList[2].content[0].line1 =
                    xkjyqk.jypx.sgpxqytj[0].lb + xkjyqk.jypx.sgpxqytj[0].sl;
                xukeList[2].content[0].line2 =
                    xkjyqk.jypx.sgpxqytj[1].lb + xkjyqk.jypx.sgpxqytj[1].sl;
                xukeList[2].content[0].line3 =
                    xkjyqk.jypx.sgpxqytj[2].lb + xkjyqk.jypx.sgpxqytj[2].sl;
                xukeList[2].content[1].line1 =
                    xkjyqk.jypx.fgpxqytj[0].lb + xkjyqk.jypx.fgpxqytj[0].sl;
                xukeList[2].content[1].line2 =
                    xkjyqk.jypx.fgpxqytj[1].lb + xkjyqk.jypx.fgpxqytj[1].sl;
                xukeList[2].content[1].line3 =
                    xkjyqk.jypx.fgpxqytj[2].lb + xkjyqk.jypx.fgpxqytj[2].sl;
                xukeList[2].content1[0].line1 =
                    xkjyqk.jypx.aqzypxqytj[0].lb + xkjyqk.jypx.aqzypxqytj[0].sl;
                xukeList[2].content1[0].line2 =
                    xkjyqk.jypx.aqzypxqytj[1].lb + xkjyqk.jypx.aqzypxqytj[1].sl;
                xukeList[2].content1[0].line3 =
                    xkjyqk.jypx.aqzypxqytj[2].lb + xkjyqk.jypx.aqzypxqytj[2].sl;
                xukeList[2].content1[1].line1 =
                    xkjyqk.jypx.aqzgpxqytj[0].lb + xkjyqk.jypx.aqzgpxqytj[0].sl;
                xukeList[2].content1[1].line2 =
                    xkjyqk.jypx.aqzgpxqytj[1].lb + xkjyqk.jypx.aqzgpxqytj[2].sl;
                xukeList[2].content1[1].line3 =
                    xkjyqk.jypx.aqzgpxqytj[2].lb + xkjyqk.jypx.aqzgpxqytj[2].sl;

                xukeList[3].content[0].line1 =
                    xkjyqk.jypx.qtqytj[0].lb + xkjyqk.jypx.qtqytj[0].sl;
                xukeList[3].content[0].line2 =
                    xkjyqk.jypx.qtqytj[1].lb + xkjyqk.jypx.qtqytj[1].sl;
                xukeList[3].content[0].line3 =
                    xkjyqk.jypx.qtqytj[2].lb + xkjyqk.jypx.qtqytj[2].sl;

                xukeList[4].content[0].line1 = "检查企业数" + xkjyqk.yhpc.jcqys;
                xukeList[4].content[0].line2 = "自查企业数" + xkjyqk.yhpc.zcqys;
                xukeList[4].content[0].line3 =
                    "挂牌督办企业数" + xkjyqk.yhpc.gpdbqys;
                xukeList[4].content[1].line1 = "整改中数量" + xkjyqk.yhpc.zgzsl;
                xukeList[4].content[1].line2 =
                    "预期未整改隐患数" + xkjyqk.yhpc.yqwzgsl;
                xukeList[4].content[1].line3 = "整改率" + xkjyqk.yhpc.zgl;

                //许可情况
                //营业执照到期
                //许可证书到期
                //安全生产标准化到期
                //其他证书信息到期
                //人员管理
                //安全生产管理人员证书
                //安全生产责任人证书
                //注册安全工程师证书
                //特种作业人员证书
                //教育培训
                //上岗培训企业统计
                //复工培训企业统计
                //安全作业培训企业统计
                //安全资格培训企业统计
                //其他企业统计
                //隐患排查
                //检查企业数
                //自查企业数
                //挂牌督办企业数
                //整改中数量
                //预期未整改隐患数
                //整改率
                //xukeList
            }
        );
        onMounted(() => {});
        return {
            title,
            state1,
            options,
            xukeList,
        };
    },
};
</script>

<style>
.city .el-select__popper.el-popper[role="tooltip"] {
    background: #031d2b;
}
.city .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: #06c8ff;
    color: #08434c;
}
.city .inputRightZeren .el-input__inner {
    height: 35px !important;
}
.city .inputRightZeren .el-input__inner {
    background: #031c23;
    border: 1px solid #08434c;
    color: #fff;
}
.city .inputRightZeren .el-input__inner::-webkit-input-placeholder {
    color: #fff;
}
.inputRightZeren {
    width: 125px;
}
.city {
    float: right;
    margin-top: -10px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.9;
    line-height: 150px;
    margin: 0;
}
.county .el-carousel__mask {
    height: 80% !important;
}
.el-carousel__item:nth-child(2n) {
    background-color: transparent;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: transparent;
}
.el-carousel__indicator--horizontal {
    padding: 4px 0px;
}
</style>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftTwo {
        margin-top: vh(25);

        .city {
            margin-top: vh(-10);
            margin-bottom: vh(10);

            .cityTitle {
                margin-top: vh(22);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .cityWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .cityList {
                display: flex;
                margin-top: vh(15);
                margin-bottom: vh(10);
                margin-left: vw(12);
                justify-content: space-between;

                .cityItem {
                    flex-shrink: 0;
                    width: vw(78);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .cityActive {
                    background: #1398CF;
                }
            }
        }

        .county {
            .titles {
                display: flex;
                justify-content: space-around;

                .title {
                    width: vw(175);
                    height: vh(40);
                    line-height: vh(40);
                    text-align: center;
                    background: rgba(3, 51, 65, 0.48);
                    border: 1px solid #094c56;

                    .sideLine {
                        width: vw(2);
                        height: vh(15);
                        margin-right: vw(10);
                        background: #86ceeb;
                    }

                    .countyWord {
                        color: #00EAFF;
                        font-size: vw(16);
                    }
                }

                .content {
                    width: vw(175);
                    height: vh(120);
                    background: rgba(3, 51, 65, 0.48);
                    padding-top: vh(20);
                    padding-left: vw(20);

                    div {
                        line-height: vh(25);
                        font-size: vw(12);
                        padding-left: vw(10);
                    }

                    div.titleC {
                        color: #00e5fd;
                    }
                }
            }

            .countyList {
                display: flex;
                flex-wrap: wrap;
                margin-left: vw(1);

                .countyItem {
                    flex-shrink: 0;
                    min-width: vw(78);
                    margin-bottom: vh(12);
                    margin-left: vw(10);
                    padding-left: vw(5);
                    padding-right: vw(5);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .countyActive {
                    background: #1398CF;
                }
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftTwo {
        margin-top: vh(25);

        .city {
            margin-top: vh(-10);
            margin-bottom: vh(10);

            .cityTitle {
                margin-top: vh(22);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .cityWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .cityList {
                display: flex;
                margin-top: vh(15);
                margin-bottom: vh(10);
                margin-left: vw1(12);
                justify-content: space-between;

                .cityItem {
                    flex-shrink: 0;
                    width: vw1(78);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw1(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .cityActive {
                    background: #1398CF;
                }
            }
        }

        .county {
            .titles {
                display: flex;
                justify-content: space-around;

                .title {
                    width: vw1(175);
                    height: vh(40);
                    line-height: vh(40);
                    text-align: center;
                    background: rgba(3, 51, 65, 0.48);
                    border: 1px solid #094c56;

                    .sideLine {
                        width: vw1(2);
                        height: vh(15);
                        margin-right: vw1(10);
                        background: #86ceeb;
                    }

                    .countyWord {
                        color: #00EAFF;
                        font-size: vw1(16);
                    }
                }

                .content {
                    width: vw1(175);
                    height: vh(240);
                    background: rgba(3, 51, 65, 0.48);
                    padding-top: vh(20);
                    padding-left: vw1(20);

                    div {
                        line-height: vh(25);
                        font-size: vw1(12);
                        padding-left: vw1(10);
                    }

                    div.titleC {
                        color: #00e5fd;
                    }
                }
            }

            .countyList {
                display: flex;
                flex-wrap: wrap;
                margin-left: vw1(1);

                .countyItem {
                    flex-shrink: 0;
                    min-width: vw1(78);
                    margin-bottom: vh(12);
                    margin-left: vw1(10);
                    padding-left: vw1(5);
                    padding-right: vw1(5);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw1(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .countyActive {
                    background: #1398CF;
                }
            }
        }

        .geoIntro {
            width: vw1(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }
        }
    }
}
</style>